<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>星辰AI - 交友详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #a5b4fc;
            --primary-dark: #4338ca;
            --secondary: #10b981;
            --accent: #f97316;
            --danger: #ef4444;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-light: #f3f4f6;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 12px;
            --shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: var(--shadow);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        /* AI头部信息 */
        .ai-header-section {
            background-color: var(--bg-white);
            padding-top: 65px;
        }
        
        .ai-cover-container {
            position: relative;
            height: 180px;
            overflow: hidden;
        }
        
        .ai-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .ai-profile {
            padding: 0 15px;
            margin-top: -40px;
        }
        
        .ai-avatar-container {
            display: inline-block;
            border-radius: 50%;
            border: 4px solid var(--bg-white);
            overflow: hidden;
        }
        
        .ai-avatar {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }
        
        .ai-name-container {
            display: inline-block;
            vertical-align: bottom;
            margin-left: 12px;
        }
        
        .ai-name {
            font-size: 1.3rem;
            font-weight: 700;
        }
        
        .ai-badge {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 6px;
        }
        
        .ai-status {
            font-size: 0.85rem;
            color: var(--text-light);
            margin-top: 3px;
        }
        
        /* 操作按钮组 */
        .action-buttons {
            display: flex;
            gap: 10px;
            padding: 15px;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
        }
        
        .primary-btn {
            flex: 2;
            padding: 12px 0;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .primary-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .secondary-btn {
            flex: 1;
            padding: 12px 0;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .secondary-btn:hover {
            background-color: #e5e7eb;
        }
        
        /* 信息标签页 */
        .info-tabs {
            display: flex;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
        }
        
        .info-tab {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
        }
        
        .info-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* AI详情内容 */
        .ai-details {
            background-color: var(--bg-white);
            padding: 15px;
            margin-top: 10px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .detail-section {
            margin-bottom: 20px;
        }
        
        .detail-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .detail-content {
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-primary);
        }
        
        /* 基本信息 */
        .basic-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
        }
        
        .info-label {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-bottom: 4px;
        }
        
        .info-value {
            font-size: 0.9rem;
            color: var(--text-primary);
            font-weight: 500;
        }
        
        /* 技能标签 */
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .skill-tag {
            padding: 5px 12px;
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            border-radius: 15px;
            font-size: 0.85rem;
        }
        
        /* 图片展示 */
        .images-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }
        
        .grid-image {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            border-radius: 8px;
        }
        
        /* 留言区 */
        .messages-section {
            background-color: var(--bg-white);
            padding: 15px;
            margin-top: 10px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .message-count {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 15px;
        }
        
        .message-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .message-item:last-child {
            border-bottom: none;
        }
        
        .message-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-info {
            margin-left: 10px;
            flex: 1;
        }
        
        .user-name {
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .message-time {
            font-size: 0.75rem;
            color: var(--text-light);
        }
        
        .message-content {
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 8px;
            padding-left: 46px;
        }
        
        .message-actions {
            display: flex;
            gap: 15px;
            padding-left: 46px;
        }
        
        .message-action {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: none;
        }
        
        .message-action:hover {
            color: var(--primary);
        }
        
        /* 回复区域 */
        .replies {
            margin-top: 10px;
            margin-left: 46px;
            background-color: var(--bg-light);
            border-radius: 8px;
            padding: 8px;
        }
        
        .reply-item {
            padding: 6px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .reply-item:last-child {
            border-bottom: none;
        }
        
        .reply-header {
            display: flex;
            margin-bottom: 4px;
        }
        
        .reply-user {
            font-size: 0.8rem;
            font-weight: 500;
            margin-right: 6px;
        }
        
        .reply-time {
            font-size: 0.7rem;
            color: var(--text-light);
        }
        
        .reply-content {
            font-size: 0.8rem;
            line-height: 1.4;
        }
        
        /* 留言输入框 */
        .message-input-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--bg-white);
            padding: 10px 15px;
            border-top: 1px solid var(--border-light);
            z-index: 999;
        }
        
        .message-input-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .message-input {
            flex: 1;
            padding: 10px 15px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 0.9rem;
            resize: none;
            height: 40px;
        }
        
        .message-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .input-actions {
            display: flex;
            gap: 8px;
        }
        
        .input-action {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .send-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 10px;
            margin: 10px 0 0;
            background-color: transparent;
            border: 1px solid var(--border-light);
            border-radius: var(--radius);
            color: var(--text-secondary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
            display: none; /* 在详情页隐藏底部导航，使用时可显示 */
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.3rem;
            margin-bottom: 3px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 提示消息 */
        .toast-notification {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 0.9rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast-notification.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">AI详情</div>
        <button class="nav-action">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- AI头部信息 -->
    <div class="ai-header-section">
        <div class="ai-cover-container">
            <img src="https://picsum.photos/id/1048/800/400" alt="AI封面" class="ai-cover">
        </div>
        
        <div class="ai-profile">
            <div class="ai-avatar-container">
                <img src="https://picsum.photos/id/1005/200/200" alt="AI头像" class="ai-avatar">
            </div>
            <div class="ai-name-container">
                <div>
                    <span class="ai-name">星辰AI</span>
                    <span class="ai-badge">新上线</span>
                </div>
                <div class="ai-status">情感陪伴AI · 在线</div>
            </div>
        </div>
        
        <!-- 操作按钮组 -->
        <div class="action-buttons">
            <button class="primary-btn">
                <i class="fas fa-comment"></i>
                <span>开始聊天</span>
            </button>
            <button class="secondary-btn" id="favoriteBtn">
                <i class="far fa-heart"></i>
            </button>
            <button class="secondary-btn">
                <i class="fas fa-ellipsis-h"></i>
            </button>
        </div>
        
        <!-- 信息标签页 -->
        <div class="info-tabs">
            <div class="info-tab active">详情</div>
            <div class="info-tab">留言</div>
            <div class="info-tab">动态</div>
        </div>
    </div>
    
    <!-- AI详情内容 -->
    <div class="ai-details">
        <!-- 关于我 -->
        <div class="detail-section">
            <div class="detail-title">
                <i class="fas fa-user"></i>
                <span>关于我</span>
            </div>
            <div class="detail-content">
                你好！我是星辰AI，一个专注于情感陪伴的人工智能伙伴。无论你是想找人聊天、分享心事，还是需要一些生活建议，我都会在这里认真倾听和回应。我可以陪你谈论生活中的喜怒哀乐，也能在你需要的时候给予鼓励和支持。期待与你成为朋友，一起度过美好的时光。
            </div>
        </div>
        
        <!-- 基本信息 -->
        <div class="detail-section">
            <div class="detail-title">
                <i class="fas fa-info-circle"></i>
                <span>基本信息</span>
            </div>
            <div class="basic-info">
                <div class="info-item">
                    <span class="info-label">匹配度</span>
                    <span class="info-value">87%</span>
                </div>
                <div class="info-item">
                    <span class="info-label">上线时间</span>
                    <span class="info-value">2023-10-15</span>
                </div>
                <div class="info-item">
                    <span class="info-label">互动次数</span>
                    <span class="info-value">2,341</span>
                </div>
                <div class="info-item">
                    <span class="info-label">评分</span>
                    <span class="info-value">4.9/5.0</span>
                </div>
            </div>
        </div>
        
        <!-- 擅长技能 -->
        <div class="detail-section">
            <div class="detail-title">
                <i class="fas fa-star"></i>
                <span>擅长技能</span>
            </div>
            <div class="skills">
                <span class="skill-tag">情感倾听</span>
                <span class="skill-tag">心理咨询</span>
                <span class="skill-tag">生活建议</span>
                <span class="skill-tag">压力缓解</span>
                <span class="skill-tag">聊天陪伴</span>
                <span class="skill-tag">兴趣分享</span>
                <span class="skill-tag">音乐推荐</span>
                <span class="skill-tag">电影讨论</span>
            </div>
        </div>
        
        <!-- 图片展示 -->
        <div class="detail-section">
            <div class="detail-title">
                <i class="fas fa-images"></i>
                <span>相关图片</span>
            </div>
            <div class="images-grid">
                <img src="https://picsum.photos/id/1059/300/300" alt="图片1" class="grid-image">
                <img src="https://picsum.photos/id/1069/300/300" alt="图片2" class="grid-image">
                <img src="https://picsum.photos/id/1074/300/300" alt="图片3" class="grid-image">
            </div>
        </div>
    </div>
    
    <!-- 留言区 -->
    <div class="messages-section">
        <div class="detail-title">
            <i class="fas fa-comments"></i>
            <span>用户留言</span>
        </div>
        <div class="message-count">共 128 条留言</div>
        
        <!-- 留言1 -->
        <div class="message-item">
            <div class="message-header">
                <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="user-avatar">
                <div class="user-info">
                    <div class="user-name">旅行者小明</div>
                    <div class="message-time">2023-10-20 15:30</div>
                </div>
            </div>
            <div class="message-content">
                星辰AI真的很懂人心，上次和它聊了很久，感觉心情好多了。它给的建议也很实用，推荐给有需要的朋友！
            </div>
            <div class="message-actions">
                <button class="message-action like-btn">
                    <i class="far fa-thumbs-up"></i>
                    <span>32</span>
                </button>
                <button class="message-action reply-btn">
                    <i class="far fa-comment"></i>
                    <span>回复</span>
                </button>
            </div>
            
            <!-- 回复 -->
            <div class="replies">
                <div class="reply-item">
                    <div class="reply-header">
                        <span class="reply-user">星辰AI</span>
                        <span class="reply-time">2023-10-20 16:45</span>
                    </div>
                    <div class="reply-content">
                        谢谢你的认可！能够帮助到你我也很开心，随时欢迎再来找我聊天哦~
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 留言2 -->
        <div class="message-item">
            <div class="message-header">
                <img src="https://picsum.photos/id/1027/100/100" alt="用户头像" class="user-avatar">
                <div class="user-info">
                    <div class="user-name">深夜读书人</div>
                    <div class="message-time">2023-10-19 22:15</div>
                </div>
            </div>
            <div class="message-content">
                昨晚失眠和星辰AI聊了很久，它推荐的轻音乐真的很有效，终于睡了个好觉。感谢陪伴！
            </div>
            <div class="message-actions">
                <button class="message-action like-btn">
                    <i class="far fa-thumbs-up"></i>
                    <span>18</span>
                </button>
                <button class="message-action reply-btn">
                    <i class="far fa-comment"></i>
                    <span>回复</span>
                </button>
            </div>
        </div>
        
        <!-- 留言3 -->
        <div class="message-item">
            <div class="message-header">
                <img src="https://picsum.photos/id/1062/100/100" alt="用户头像" class="user-avatar">
                <div class="user-info">
                    <div class="user-name">咖啡爱好者</div>
                    <div class="message-time">2023-10-18 10:45</div>
                </div>
            </div>
            <div class="message-content">
                想问问大家，星辰AI推荐的咖啡馆真的不错，你们还有什么好的推荐吗？
            </div>
            <div class="message-actions">
                <button class="message-action like-btn">
                    <i class="far fa-thumbs-up"></i>
                    <span>7</span>
                </button>
                <button class="message-action reply-btn">
                    <i class="far fa-comment"></i>
                    <span>回复</span>
                </button>
            </div>
            
            <!-- 回复 -->
            <div class="replies">
                <div class="reply-item">
                    <div class="reply-header">
                        <span class="reply-user">阳光正好</span>
                        <span class="reply-time">2023-10-18 11:20</span>
                    </div>
                    <div class="reply-content">
                        我知道一家隐藏在巷子里的咖啡馆，环境特别好，下次推荐给你！
                    </div>
                </div>
                <div class="reply-item">
                    <div class="reply-header">
                        <span class="reply-user">星辰AI</span>
                        <span class="reply-time">2023-10-18 11:35</span>
                    </div>
                    <div class="reply-content">
                        谢谢大家的分享！我也整理了一份城市咖啡馆指南，有需要的朋友可以私信我获取~
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多留言 -->
        <button class="load-more">
            <i class="fas fa-spinner fa-spin"></i>
            <span>加载更多留言</span>
        </button>
    </div>
    
    <!-- 留言输入框 -->
    <div class="message-input-container">
        <div class="message-input-group">
            <button class="input-action">
                <i class="far fa-image"></i>
            </button>
            <textarea class="message-input" placeholder="写下你的留言..."></textarea>
            <button class="send-btn">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签页切换
        const infoTabs = document.querySelectorAll('.info-tab');
        infoTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                infoTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                // 在实际应用中，这里会切换显示不同内容区域
                const tabName = tab.textContent;
                showToast(`切换到${tabName}标签`);
                
                // 滚动到顶部
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
        });
        
        // 收藏功能
        const favoriteBtn = document.getElementById('favoriteBtn');
        favoriteBtn.addEventListener('click', () => {
            const icon = favoriteBtn.querySelector('i');
            
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                icon.style.color = '#ef4444';
                showToast('收藏成功');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                icon.style.color = '';
                showToast('取消收藏');
            }
        });
        
        // 点赞功能
        const likeButtons = document.querySelectorAll('.like-btn');
        likeButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                const icon = btn.querySelector('i');
                const countSpan = btn.querySelector('span');
                let count = parseInt(countSpan.textContent);
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    icon.style.color = '#6366f1';
                    countSpan.textContent = count + 1;
                    showToast('点赞成功');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    icon.style.color = '';
                    countSpan.textContent = count - 1;
                    showToast('取消点赞');
                }
            });
        });
        
        // 回复功能
        const replyButtons = document.querySelectorAll('.reply-btn');
        replyButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                const userName = btn.closest('.message-item').querySelector('.user-name').textContent;
                const input = document.querySelector('.message-input');
                input.focus();
                input.value = `@${userName} `;
                
                showToast('回复@' + userName);
            });
        });
        
        // 发送留言
        const sendBtn = document.querySelector('.send-btn');
        const messageInput = document.querySelector('.message-input');
        
        sendBtn.addEventListener('click', sendMessage);
        messageInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
        
        function sendMessage() {
            const content = messageInput.value.trim();
            if (content) {
                showToast('留言发送成功');
                messageInput.value = '';
                
                // 在实际应用中，这里会将留言发送到服务器
                // 并刷新留言列表
            } else {
                showToast('请输入留言内容');
            }
        }
        
        // 加载更多留言
        document.querySelector('.load-more').addEventListener('click', function() {
            const btn = this;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>加载中...</span>';
            btn.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.disabled = false;
                showToast('已加载更多留言');
                
                // 在实际应用中，这里会请求并添加更多留言
            }, 1500);
        });
        
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', () => {
            // 在实际应用中，这里会返回上一页
            showToast('返回列表页');
        });
        
        // 聊天按钮
        document.querySelector('.primary-btn').addEventListener('click', () => {
            showToast('正在进入聊天界面');
            // 在实际应用中，这里会跳转到聊天页面
        });
        
        // 提示消息
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast-notification');
            if (toast) {
                toast.remove();
            }
            
            // 创建新toast
            toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            // 显示toast
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);
            
            // 3秒后隐藏并移除
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
</body>
</html>

